<template>
  <div>
<!--        {{ id }} &#45;&#45; {{ name}}-->
    <!--    音频 html5-->
<!--    <audio :src="url" controls></audio>-->
    <!--    使用 插件--组件 <aplayer :audio="audio[0]" :showlrc="true"/> 是否显示歌词--->
    <aplayer :music="{...audio}" :showlrc="true" v-if="audio.url"></aplayer>
  </div>
</template>

<script>
import aplayer from 'vue-aplayer'

export default {
  props: ['id', 'name'],
  components: {
    aplayer
  },
  data () {
    return {
      url: '',
      audio:
        {
          title: this.name,//歌曲名字
          artist: '演唱者',//演唱者
          url: "", //音频文件
          pic: '',//演唱者封面
          lrc: '[00:00.0] OVO 刚刚开始学钢琴的hhhhh',//歌词或者歌词文件
          theme: '',//歌曲主题
        }

    }
  },
  name: 'SongPage',
  created () {
    this.getSong()
    this.getlyric()
  },
  methods: {
    //获取音乐的url地址----------------
    async getSong () {
      let res = await this.$api.songUrl({
        id: this.id
      })
      console.log('res', res.data)
      this.url = res.data.data[0].url
      //获取音乐的url
      this.audio.url = this.url
    },
    //获取歌词------
    async getlyric(){
      let res = await this.$api.getlyric({id:this.id})
      console.log('歌词----',res.data)
      this.audio.lrc = res.data.lrc.lyric
    }
  }
}
</script>


<style scoped lang="less">

</style>
